<template>
	<view class="" style="display: flex;flex-wrap: wrap;">
		<view class="field" v-for="(item, index)  in picUrlListCopy ">
			<view class="showpdf">
				<img class="pho" @click="previewPic(item)" :src="item" alt="">
				<view class="delete-icon" v-if="editFlag" @click="deletePic(item, index, listType)"></view>
			</view>
			<!-- <uni-file-picker v-model="" title="" limit="" file-mediatype=""></uni-file-picker> -->
		</view>

		<view class="showpdf image-wrape" v-if="editFlag"
			style="background-image: url(/static/more.png);height: 200rpx;width: 200rpx;margin-top: 16rpx;background-size: 100% 100%;"
			@click="fileTabChoose(listType)"></view>
	</view>
</template>

<script>
	import {
		uploadUrl
	} from '@/pages/api/report/helperOrderp.js'
	export default{
		props: {
			picUrlList: {
				type: Array,
				default: [
					// 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/1628423927320jpg20210812175526643.jpeg',
					// 'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/Screenshot_2021-08-09-08-55-04-49_ca6ee20236ea15ad01663c6ea4ca0bdbjpg20210812175425367.jpeg',
				]
			}, // 图片地址
			editFlag: {
				type: Boolean,
				default: true
			}, // 是否可编辑
			listType: {
				type: [String,Number],
				default: 0
			} // 用于判断父组件接收对象
		},
		data() {
				return {
					picUrlListCopy: []
				// 	picUrlList: [
				// 	'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/1628423927320jpg20210812175526643.jpeg',
				// 	'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/Screenshot_2021-08-09-08-55-04-49_ca6ee20236ea15ad01663c6ea4ca0bdbjpg20210812175425367.jpeg',
				// 	'https://wyc-store.oss-cn-shanghai.aliyuncs.com/deqing/zhatu/IMG20210811230327jpg20210812175439910.jpeg',
				// ]
				}
			},
			methods: {
				// 选择图片
				fileTabChoose(type) {
					// this.$emit('fileTabChoose', )
					uni.chooseImage({
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						success: res => {
							console.log(res.tempFilePaths)
							res.tempFilePaths.forEach(e => {
								this.requestUploadImg(e, type)
							})
						}
					});
				},
				//删除图片
				deletePic(item, index, type) {
					// console.log(this.picUrlList)
					this.picUrlListCopy.splice(index, 1) //按索引删除
					this.picUrlList.splice(index, 1) //按索引删除
					// console.log(this.picUrlList)
					this.$emit('updateUrlList', this.picUrlListCopy, type)
				},
				//预览图片
				previewPic(item) {
					console.log("图片操作事件", item)
					let arr = []
					arr.push(item)
					console.log('图片预览', arr)
					uni.previewImage({
						urls: arr
					})
				},
				//上传照片
				requestUploadImg(filePath,type) {
					console.log(filePath)
					return new Promise((resolve, reject) => {
						uni.uploadFile({
							url: uploadUrl,
							filePath,
							name: 'file',
							formData: {
								itemId: 'chengguansuishoupai'
							},
							success: (uploadFileRes) => {
								console.log('照片地址', JSON.parse(uploadFileRes.data).data)
								let arr = [JSON.parse(uploadFileRes.data).data.fileUrl]
								this.picUrlList = this.picUrlList.concat(arr)
								this.picUrlListCopy = this.picUrlListCopy.concat(arr)
								this.$emit('updateUrlList', this.picUrlListCopy, type)
							},
							fail: err => {
								console.log(err)
							}
						});
					})
				}
			},
			created() {
				this.picUrlListCopy = JSON.parse(JSON.stringify(this.picUrlList))
				this.listTypeCopy = this.listType
			},
			mounted() {
		
			},
			watch: {
				picUrlList: {
					handler() {
						// console.log(this.picUrlList)
						this.picUrlListCopy = JSON.parse(JSON.stringify(this.picUrlList))
					}
				}
			}
	}
</script>

<style lang="scss" scoped>
	.field {
		width: 215rpx;
		color: #B3B5B9;
		margin-right: 8rpx;
		.image-wrape{
			width: 200rpx;
			height: 200rpx;
			background: url('/static/more.png') no-repeat;
			background-size: 100% 100%;
		}
		.showpdf {
			margin-top: 16rpx;
			height: 200rpx;
			width: 200rpx;
			border: 1rpx solid #E8E9EC;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.pho {
				height: 200rpx;
				width: 200rpx;
			}

			.pdf {

				height: 128rpx;
				width: 104rpx;
			}

			.delete-icon {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 0;
				right: 0;
				background: url(/static/delete-icon.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>
